<script setup>
import {ref} from 'vue';

const imageUrl = ref('');

const imageCropperRef = ref(null);

/**
 * 处理文件选择变化
 * @param val
 */
const change = (val) => {
  imageUrl.value = val;
}
const croppedResult = ref(null);

/**
 * 获取裁剪后的图片信息
 */
const getCroppedImage = () => {
  if (imageCropperRef.value) {
    imageCropperRef.value.getCroppedImage().then((result) => {
      console.log(result, '裁剪结果');
      croppedResult.value = result;
    });
  }
}
</script>


<template>
  <div>
    <dev-file-select style="margin-bottom: 20px" :maxFileSize="4" @change="change" accept="image/*"/>
    <div>
      <dev-image-cropper ref="imageCropperRef" :showViewer="false" :imageUrl="imageUrl"/>
    </div>
    <div style="margin-top: 20px" v-if="croppedResult">
      <p>更多结果信息请查看控制台</p>
      <div>
        <el-image :src="croppedResult.url"></el-image>
      </div>
    </div>
  </div>

  <el-button v-if="imageUrl" style="margin-top: 20px" type="success" @click="getCroppedImage">裁剪</el-button>
</template>

<style scoped>

</style>
